<template>
    <div>
        <el-row v-for="(field,index) in fieldList">
            <el-descriptions :title="field.name" :column="3" size="mini">
                <template slot="extra">
                    <vue-copy-to-clipboard :text="field.fieldName" ref="copy">
                        <el-button><i class="el-icon-document-copy"></i>复制</el-button>
                    </vue-copy-to-clipboard>
                </template>
                <el-descriptions-item label="字段名">{{field.fieldName}}</el-descriptions-item>
                <el-descriptions-item label="来源"><el-tag size="mini">{{field.userId}}</el-tag></el-descriptions-item>
                <el-descriptions-item label="更新时间">{{field.updateTime}}</el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
        </el-row>
        <el-pagination
                background
                layout="prev, pager, next"
                @current-change="handleCurrentPageChange"
                :current-page="current"
                :page-size="pageSize"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import request from "../utils/request";
    import HomeView from "./HomeView";

    export default {
        name: "FieldView",
        data() {
            return {
                fieldList: [],
                createSql: '',
                current:1,
                pageSize:4,
                total:0
            }
        },
        created() {
            this.getPage()

        },
        methods: {
            getPage() {
                request.get('field_info/list/page/'+this.current+"/"+this.pageSize).then(res => {
                    this.fieldList=res.data.records
                    this.current = res.data.current
                    this.pageSize = res.data.size
                    this.total = res.data.total
                    var arr = this.fieldList
                    for (var i = 0; i < arr.length; i++) {
                        const date = new Date(this.fieldList[i].updateTime)
                        const options = {
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric',
                            hour: 'numeric',
                            minute: 'numeric',
                        };
                        this.fieldList[i].updateTime = new Intl.DateTimeFormat('zh-CN', options).format(date)
                    }

                })
            },

            handleCurrentPageChange(currentPage){
                this.current=currentPage;
                this.getPage();
            },
        }
    }
</script>